<template>
    <a-drawer :title="title" :maskClosable="true" :width="drawerWidth" placement="right" :closable="true"
        @close="handleCancel" :visible="visible" style="height: 100%;overflow: auto;padding-bottom: 53px;">

        <template slot="title">
            <div style="width: 100%;">
                <span>{{ title }}</span>
                <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
                    <a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
                </span>
            </div>

        </template>

        <template>

            <a-spin :spinning="confirmLoading">
                <j-form-container :disabled="formDisabled">
                    <a-form-model ref="form" :model="model"  slot="detail">
                        <a-row>
                            <a-col :span="24">
                                <a-form-model-item label="参数code" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                    prop="paramCode">
                                    <a-input v-model="model.paramCode" placeholder="请输入参数code"></a-input>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-model-item label="参数name" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                    prop="paramName">
                                    <a-input v-model="model.paramName" placeholder="请输入参数name"></a-input>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-model-item label="是否是必须的" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                    prop="isMust">
                                    <a-select  v-model="model.isMust"  placeholder="请输入是否是必须的">
                                        <a-select-option value="0">否</a-select-option>
                                        <a-select-option value="1">是</a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                    </a-form-model>
                </j-form-container>
            </a-spin>
        </template>


        <div class="drawer-bootom-button" v-show="!disableSubmit">
            <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
                <a-button style="margin-right: .8rem">取消</a-button>
            </a-popconfirm>
            <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
        </div>
    </a-drawer>
</template>

<script>
import moment from 'moment'
import { getAction } from '@/api/manage'
import { editCollectSourceParamsDefine,addCollectSourceParamsDefine } from '@/api/apiDs'
import { disabledAuthFilter } from "@/utils/authFilter"

export default {
    name: "UserModal",
    props: {
        //表单禁用
        disabled: {
            type: Boolean,
            default: false,
            required: false
        }
    },
    components: {
    },
    data() {
        return {
            description: '数据源参数定义',
            modalWidth: 800,
            drawerWidth: 700,
            modaltoggleFlag: true,
            confirmDirty: false,
            disableSubmit: false,
            dateFormat: "YYYY-MM-DD",
            title: "操作",
            visible: false,
            model: {},
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
            confirmLoading: false,
        }
    },
    created() {
    },
    computed: {
        formDisabled() {
            return this.disabled
        },
    },
    methods: {
        add(sourceTid) {
            let that = this;
            that.visible = true;
            that.model.sourceTid = sourceTid;
        },
        edit(record) {
            let that = this;
            that.visible = true;
            //根据屏幕宽度自适应抽屉宽度
            this.resetScreenSize();
            that.model = Object.assign({}, { selectedroles: '', selecteddeparts: '' }, record);
            that.model.isMust = that.model.isMust+'';
            console.log('that.model=', that.model)
        },
        isDisabledAuth(code) {
            return disabledAuthFilter(code);
        },
        //窗口最大化切换
        toggleScreen() {
            if (this.modaltoggleFlag) {
                this.modalWidth = window.innerWidth;
            } else {
                this.modalWidth = 800;
            }
            this.modaltoggleFlag = !this.modaltoggleFlag;
        },
        // 根据屏幕变化,设置抽屉尺寸
        resetScreenSize() {
            let screenWidth = document.body.clientWidth;
            if (screenWidth < 500) {
                this.drawerWidth = screenWidth;
            } else {
                this.drawerWidth = 700;
            }
        },
        close() {
            this.$emit('close');
            this.visible = false;
            this.disableSubmit = false;
            this.nextDepartOptions = [];
            this.departIdShow = false;
            this.$refs.form.resetFields();
        },
        moment,
        handleCancel() {
            this.close()
        },
        //表单提交
        handleSubmit() {
            const that = this
            let obj;
            if(this.model.tid){
              obj=editCollectSourceParamsDefine(this.model);
            }else{
              obj=addCollectSourceParamsDefine(this.model);
            }

            obj.then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })

        }
    }
}
</script>

<style scoped>
.avatar-uploader>.ant-upload {
    width: 104px;
    height: 104px;
}

.ant-upload-select-picture-card i {
    font-size: 49px;
    color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
}

.ant-table-tbody .ant-table-row td {
    padding-top: 10px;
    padding-bottom: 10px;
}

.drawer-bootom-button {
    position: absolute;
    bottom: -8px;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
}</style>